@extends('home.pc.public.public')

@section('main')
    {{--关于我们 S--}}
    <div class="miya_index_about">
        <h3 class="miya_index_about_title title_adorn">关于我们</h3>
        <div class="miya_index_about_box">
            <div class="miya_index_about_describe">{!! $box['about'] !!}</div>
            <div id="allmap1" class="miya_index_about_map"></div>
        </div>
    </div>
    <script src="/public/boots/js/map.js"></script>
    {{--关于我们 E--}}

    {{--产品模块 S--}}
    <div class="miya_index_product">
        <div class="miya_index_product_box">
            <h3 class="miya_index_product_title title_adorn">产品中心</h3>
            <ul class="miya_index_product_sort">
                <li data-sort="all">所有</li>
                @foreach($sorts['product'] as $value)
                    <li data-sort="{{ $value['id'] }}">{{ $value['name'] }}</li>
                @endforeach
            </ul>
            <ul class="miya_index_product_info">
                @foreach($allInfos['product'] as $value)
                    <li class="active" data-sort="{{ $value['sort_id'] }}">
                        <a href="{{ route('info',['product',$value['id']]) }}">
                            <div class="miya_index_product_info_li_img">
                                <img src="{{ $value['image'] }}" alt="{{ $value['price'] }}">
                            </div>
                            <h4 class="miya_index_product_info_li_h4">{{ $value['name'] }}</h4>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
    <script>
        $(function () {
            //展示数量
            var showNum = 5;
            $('.miya_index_product_sort li').click(function () {
                //添加选中
                $(this).addClass('active').siblings().removeClass('active');
                var sortId = $(this).attr('data-sort');
                if (sortId == 'all') {
                    $('.miya_index_product_info li').hide();
                    $('.miya_index_product_info li:lt(' + showNum + ')').show();
                } else {
                    $('.miya_index_product_info li').hide();
                    $('.miya_index_product_info li[data-sort="' + sortId + '"]:lt(' + showNum + ')').show();
                }
            })
        })
    </script>
    {{--产品模块 E--}}

    {{--新闻模块 S--}}
    <div class="miya_index_new">
        <h3 class="miya_index_new_title title_adorn">新闻资讯</h3>
        <ul class="miya_index_new_info_right_page">
            @php
                $page = ceil(count($allInfos['new']) / 3);
            @endphp
            @for ($i = 1; $i <= $page; $i++)
                <li class="{{ $i==1?'active':'' }}">{{ $i }}</li>
            @endfor
        </ul>
        <ul class="miya_index_new_info_left">
            @foreach($fragment['newone'] as $value)
                <li>
                    @php
                        $time = strtotime($value['time']);
                        $year = date('Y',$time);
                        $mouth = date('m',$time);
                        $day = date('d',$time);
                    @endphp
                    <div class="miya_index_new_info_left_info_date">
                        <p>{{ $year }}</p>
                        <p>{{ $mouth.'-'.$day }}</p>
                    </div>
                    <a class="miya_index_new_info_left_info_title"
                       href="{{ route('info',['new',$value['id']]) }}">{{ $value['name'] }}</a>
                    <p class="miya_index_new_info_left_info_describe">{{ subtext($value['simpledescribe'],60) }}</p>
                </li>
            @endforeach
        </ul>
        <ul class="miya_index_new_info_right">
            @foreach($allInfos['new'] as $value)
                <li>
                    <a class="miya_index_new_info_right_info_title"
                       href="{{ route('info',['new',$value['id']]) }}">{{ $value['name'] }}</a>
                    <div class="miya_index_new_info_right_info_date">{{ $value['time'] }}</div>
                    <p class="miya_index_new_info_right_info_describe">{{ $value['simpledescribe'] }}</p>
                </li>
            @endforeach
        </ul>
    </div>
    <script>
        $(function () {
            $('.miya_index_new_info_right_page li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var num = $(this).index();
                $('.miya_index_new_info_right li').hide();
                for (var i = 0; i < 3; i++) {
                    $('.miya_index_new_info_right li:eq(' + (num * 3 + i) + ')').show();
                }
            })
        })
    </script>
    {{--新闻模块 E--}}

    {{--案例模块 S--}}
    <div class="miya_index_case">
        <div class="miya_index_case_box">
            <div class="miya_index_case_title title_adorn">案例中心</div>
            <ul class="miya_index_case_sort">
                @foreach($sorts['case'] as $value)
                    <li>
                        <a href="{{ route('sort',['product',$value['id']]) }}">{{ $value['name'] }}</a>
                    </li>
                @endforeach
            </ul>
            <div class="miya_index_case_info">
                @foreach($fragment['case'] as $value)
                    <div class="slide miya_index_case_info_box">
                        <a href="{{ route('info',['case',$value['id']]) }}"
                           title="{{ $value['name'] }}" alt="{{ $value['name'] }}">
                            <div class="image"><img src="{{ $value['image'] }}"></div>
                            <h4>{{ $value['name'] }}</h4>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <script src="/public/boots/js/slider/jquery.bxslider.js"></script>
    <script>
        //案例滚动
        $('.miya_index_case_info').bxSlider({
            slideWidth: 240,
            minSlides: 2,
            maxSlides: 6,
            slideMargin: 0,
            auto: true,
            controls: false,
            pager: false,
            autoHover: true
        });
    </script>
    {{--案例模块 E--}}
@endsection